<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>一周访问量图表熊猫制作</title>

    <!-- 引入 ECharts 文件 -->

    <script src="echarts.js"></script>

    <style>

        /* 设置图表容器的样式 */

        .chart-container {

            width: 100%;

            height: 400px;

            margin-bottom: 20px;

            background-color: #f0f0f0; /* 添加背景颜色 */

        }

    </style>

</head>



<body>

    <!-- 柱状图容器 -->

    <div id="barChart" class="chart-container"></div>

    <!-- 折线图容器 -->

    <div id="lineChart" class="chart-container"></div>

    <!-- 饼图容器 -->

    <div id="pieChart" class="chart-container"></div>

    <script>

        // 定义一周的日期和对应的访问量数据

        var days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

        var visits = [320, 402, 431, 398, 520, 630, 710];



        // 公用函数：初始化图表

        function initChart(domId, option) {

            var chart = echarts.init(document.getElementById(domId));

            chart.setOption(option);

        }



        // 绘制柱状图

        var barOption = {

            title: {

                text: '一周内每天的访问量——李文思',

                left: 'center',

                textStyle: {

                    color: '#333',

                    fontSize: 18

                },

                subtext: '单位：万元',

                subtextStyle: {

                    color: '#666',

                    fontSize: 14

                }

            },

            xAxis: {

                type: 'category',

                data: days

            },

            yAxis: {

                type: 'value'

            },

            series: [{

                data: visits,

                type: 'bar',

                label: {

                    show: true,

                    position: 'top',

                    color: '#333',

                    fontSize: 14

                }

            }]

        };

        initChart('barChart', barOption);



        // 绘制折线图

        var lineOption = {

            title: {

                text: '一周内每天访问量增长趋势——李文思',

                left: 20,

                top: 10,

                textStyle: {

                    color: '#fff',

                    fontSize: 20,

                    backgroundColor: '#2c343c',

                    borderWidth: 2,

                    borderColor: '#000'

                }

            },

            xAxis: {

                type: 'category',

                data: days

            },

            yAxis: {

                type: 'value'

            },

            series: [{

                data: visits,

                type: 'line',

                label: {

                    show: true,

                    position: 'top',

                    color: '#333',

                    fontSize: 14

                }

            }]

        };

        initChart('lineChart', lineOption);



        // 绘制饼图

        var pieOption = {

            title: {

                text: '一周每天的访问量份额占比——24P13210234',

                link: 'https://www.baidu.com', // 设置链接

                target: 'blank', // 在新窗口打开

                left: 'center',

                top: 'top',

                textStyle: {

                    color: '#333',

                    fontSize: 16,

                    rich: {

                        a: {

                            color: '#333',

                            textDecoration: 'underline'

                        }

                    }

                }

            },

            series: [{

                type: 'pie',

                radius: '50%',

                data: days.map((day, index) => ({

                    value: visits[index],

                    name: day

                })),

                label: {

                    show: true,

                    formatter: '{b}: {c} ({d}%)',

                    color: '#333',

                    fontSize: 14

                }

            }]

        };

        initChart('pieChart', pieOption);

    </script>

</body>



</html>